.containersRoot
{
	width: 100%;
	height: 100%;
}
	#Chests
	{
		horizontal-align: center;
		vertical-align: center;

		flow-children: right;
	}
		.Chest
		{
			background-color: #000000dd;
			margin-right: 50px;

			opacity: 0;

			transition-property: opacity;
			transition-duration: .2s;
		}
		.Show.Chest
		{
			opacity: 1;
		}
	#InventoryAndEquipments
	{
		horizontal-align: center;
		vertical-align: bottom;

		flow-children: right;
	}
		#Inventory
		{
			background-color: #000000dd;

			flow-children: none;
		}
		#Equipments
		{
			background-color: #000000dd;
			border: 2px solid gold;

			flow-children: none;
		}
	#Backpack
	{
		horizontal-align: right;
		vertical-align: center;

		background-color: #000000dd;

		flow-children: none;
	}
		.Slot
		{
			width: 59px;
			height: 45px;

			background-size: cover;
			overflow: noclip;
			background-color: #1a1c1d88;

			margin-left: 3px;
			margin-right: 3px;
			margin-top: 2px;
			margin-bottom: 2px;

			background-image: url("s2r://panorama/images/hud/reborn/inventory_item_well_psd.vtex");
			box-shadow: none;

			transition-property: box-shadow;
			transition-duration: .2s;
			transition-timing-function: ease-in-out;

			horizontal-align: left;
			vertical-align: top;
			tooltip-position: top;
		}
		.Slot.is_passive,
		.Slot.no_level
		{
			box-shadow: none;
		}
		.Slot:not(.no_level)
		{
			background-image: none;
		}
		.Slot.can_cast_again,
		.Slot.is_passive
		{
			background-image: url("s2r://panorama/images/hud/reborn/inventory_item_well_psd.vtex");
			box-shadow: fill #000000aa 0px 0px 0px 0px;
		}
		.Slot.is_passive
		{
			box-shadow: inset #000000aa 2px 2px 4px 4px;
		}
		.Slot.dragging_from:not(.no_level)
		{
			background-image: url("s2r://panorama/images/hud/reborn/inventory_item_well_psd.vtex");
			background-size: cover;
			box-shadow: fill #00000000 -5px -5px 8px 8px;
		}
			#PerishingBorder
			{
				width: 100%;
				height: 100%;

				transition-property: clip;
				transition-duration: 0.06s;
				transition-timing-function: linear;

				visibility: collapse;
			}
			.is_perishable #PerishingBorder
			{
				visibility: visible;
			}
			.dragging_from #PerishingBorder
			{
				opacity: 0;
			}
			#ItemButton
			{
				width: 100%;
				height: 100%;

				background-color: gradient( linear, 0% 0%, 0% 100%, from( #00000000 ), to( #00000000 ) );
				transition-property: pre-transform-scale2d, brightness, saturation, background-color, opacity;
				transition-duration: .06s, .1s;
				transition-timing-function: ease-out;
			}
			#ItemButton:hover
			{
				brightness: 1.6;
			}
			.is_perishable #ItemButton
			{
				pre-transform-scale2d: .925;
			}
			.dragging_from #ItemButton
			{
				saturation: 0.5;
				wash-color: #808080;
				opacity: .35;
				pre-transform-scale2d: .9;
			}
			.can_cast_again.Slot #ItemButton
			{
				pre-transform-scale2d: .9;
				transition-duration: .06s;
			}
				#ItemButton > #ItemImage
				{
					width: 100%;
					height: 100%;
					z-index: -1;
					background-image: none;
				}
				.insufficient_mana:not(.muted) #ItemButton > #ItemImage
				{
					saturation: 0;
					wash-color: #1569be;
				}
				.insufficient_mana #ItemButton > #ItemImage
				{
					pre-transform-scale2d: 1;
					contrast: .79;
					saturation: .5;
					wash-color: #000000a4;
					saturation: 0;
					wash-color: #1569be;
					contrast: .7;	
				}
				.muted #ItemButton > #ItemImage
				{
					saturation: 0.6;
				}
				.is_active #ItemButton > #ItemImage,
				{
					pre-transform-scale2d: 1.05;
				}
				.can_cast_again #ItemButton > #ItemImage
				{
					pre-transform-scale2d: 1;
					contrast: 1;
					saturation: .6;
					//wash-color: #000000a4;
				}
				.insufficient_mana.can_cast_again #ItemButton > #ItemImage
				{
					pre-transform-scale2d: 1;
					contrast: 1.2;
					saturation: 0;
					wash-color: #1569be;
				}

				#ItemBevel
				{
					width: 100%;
					height: 100%;
					margin: 0px;
					background-image: url("s2r://panorama/images/hud/reborn/inventory_item_bevel_psd.vtex");
					background-size: contain;
					background-position: 50% 50%;
					background-repeat: no-repeat;
					z-index: 1;
					background-color: none;
					visibility: visible;

					transition-property: brightness, background-color;
					transition-duration: .12s;
					transition-timing-function: ease-in;
				}
				.no_level #ItemBevel
				{
					background-image: none;
				}
				.is_passive #ItemBevel
				{
					visibility: collapse;
				}
				.item_phase #ItemBevel
				{
					brightness: 3;
					wash-color: #00ff00;
					background-color: gradient( linear, 0% 0%, 0% 100%, from( #00FF0033 ), to( #00FF0000 ) );	
				}
				.is_active #ItemBevel
				{
					brightness: 6;
					transition-timing-function: ease-out;	
				}
				.insufficient_mana #ItemBevel
				{
					wash-color: #6095FD;
					transition-timing-function: ease-out;	
				}

				#ShineContainer
				{
					width: 100%;
					height: 100%;
				}
				.is_passive #ShineContainer
				{
					margin: 0px;
				}
					#Shine
					{
						background-color: gradient( linear, 100% 0%, 0% 100%, from( #00000000 ), color-stop( 0.3, #00000000 ), color-stop( 0.45, #ffffffff ), color-stop( 0.55, #ffffffff ), color-stop( 0.7, #00000000 ), to( #00000000 ) );
						background-size: 100% 100%;
						width: 100%;
						height: 100%;

						opacity: 0.00001;
						animation-name: none; 
						animation-duration: 0.4s;	
						animation-timing-function: ease-in-out;
					}
					#Shine.do_shine
					{
						animation-name: shine-sweep; 
						animation-duration: 0.4s;
					}
					@keyframes 'shine-sweep'
					{
						0%
						{
							transform: translateX(-32px) translateY(32px);
							opacity: 1.0;
						}

						100%
						{
							transform: translateX(32px) translateY(-32px);
							opacity: 1.0;
						}
					}

				#Cooldown
				{
					width: 100%;
					height: 100%;
					visibility: collapse;
				}
				.in_cooldown #Cooldown
				{
					visibility: visible;
				}
					#CooldownOverlay
					{
						width: 100%;
						height: 100%;
						background-color: #000000dc;

						transition-property: clip;
						transition-duration: 0s;
						transition-timing-function: linear;
					}
					.in_cooldown #CooldownOverlay
					{
						transition-duration: 0.06s;
					}
					#CooldownTimer
					{
						margin-top: 1px;
						color: white;
						font-size: 16px;
						text-shadow: 0px 0px 3px 3.7 #000000FF;
						width: 100%;
						text-align: center;
						vertical-align: center;
					}

				#ActiveItem
				{
					width: 100%;
					height: 100%;
					background-color: gradient( radial, 50% -20%, 0% 0%, 80% 80%, from( #FFFFFF08 ), to( #FFFFFF08 ) );
					border: 4px solid #FFFFFF40;
					opacity: 0;
				}
				.is_active #ActiveItem
				{
					border: 0px solid transparent;
					background-color: none;
					opacity: 1;
				}

				#InactiveOverlay
				{
					width: 100%;
					height: 100%;
					background-color: black;
					visibility: collapse;
					opacity: 0.1;
				}

				#Charges
				{
					color: #ffffff;
					font-size: 16px;
					font-weight: bold;
					visibility: collapse;
					vertical-align: bottom;
					horizontal-align: right;
					visibility: collapse;
					margin-right: 3px;
					margin-bottom: -3px;
					text-shadow: 0px 0px 3px 4 #000000;
					font-family: RadianceM;
				}
				.show_charges #Charges
				{
					visibility: visible;
				}

				#AltCharges
				{
					color: #999999;
					font-size: 14px;
					visibility: collapse;
					vertical-align: bottom;
					horizontal-align: left;
					font-weight: bold;
					margin-left: 3px;
					font-family: RadianceM;
				}
				.show_alt_charges #AltCharges
				{
					visibility: visible;
				}
				#FiniteUsesPercent
				{
					color: #ffffff;
					font-size: 16px;
					margin-bottom: -3px;
					font-weight: bold;
					vertical-align: bottom;
					horizontal-align: center;
					visibility: collapse;
					text-shadow: 0px 0px 3px 4 #000000;
					font-family: RadianceM;
					opacity: 0.75;
				}
				.is_finite_uses #FiniteUsesPercent,
				{
					visibility: visible;
				}

			#DropTargetHighlight
			{
				margin-top: 1px;
				margin-left: 1px;
				width: 100%;
				height: 100%;
				background-color: gradient( radial, 50% -20%, 0% 0%, 80% 100%, from( #FFFFFF66 ), to( #FFFFFF00 ) );
				opacity: 0;
			}
			.dragging_from #DropTargetHighlight
			{
				visibility: collapse;
			}
			.potential_drop_target #DropTargetHighlight
			{
				opacity: 0.3;
			}
